<template>
  <div>
    <el-form
      ref="form"
      :size="'medium'"
      :model="form"
      label-width="100px"
      v-loading="loading"
      disabled
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="机房名称" prop="machineRoomName">
            <el-input
              v-model="form.machineRoomName"
              placeholder="请输入机房名称"
              suffix-icon="xxx"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属站点" prop="station">
            <el-select
              v-model="form.station"
              placeholder="请选择所属站点"
              clearable
            >
              <el-option
                v-for="dict in stationOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="机房类型" prop="machineRoomType">
            <el-select
              v-model="form.machineRoomType"
              placeholder="请选择机房类型"
              clearable
            >
              <el-option
                v-for="dict in machineRoomTypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="机房编号" prop="machineRoomNum">
            <el-input
              v-model="form.machineRoomNum"
              placeholder="请输入机房编号"
              suffix-icon="xxx"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="机房位置" prop="machineRoomPlace">
            <el-input
              v-model="form.machineRoomPlace"
              placeholder="请输入机房位置"
              suffix-icon="xxx"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="走线方式" prop="takeUpMode">
            <el-select
              v-model="form.takeUpMode"
              placeholder="请选择走线方式"
              clearable
            >
              <el-option
                v-for="dict in takeUpModeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="最大屏位数" prop="maxScreenNumber">
            <el-input
              v-model="form.maxScreenNumber"
              onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
              placeholder="请输入最大屏位数"
              suffix-icon="xxx"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="已用屏位数" prop="useScreenNumber">
            <el-input
              onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
              v-model="form.useScreenNumber"
              placeholder="请输入已用屏位数"
              suffix-icon="xxx"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否监控" prop="monitoringFlag">
            <el-select
              v-model="form.monitoringFlag"
              placeholder="请选择是否监控"
              clearable
            >
              <el-option
                v-for="dict in monitoringFlagOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="填报部门" prop="fillDept">
            <el-input
              v-model="form.fillDept"
              placeholder="请输入填报部门"
              suffix-icon="xxx"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="填报人" prop="fillBy">
            <el-input
              v-model="form.fillBy"
              placeholder="请输入填报人"
              suffix-icon="xxx"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getRoom } from '@/api/machineroom/machineroom'
import { stationDictList } from '@/api/station/station'
export default {
  props: ['id'],
  data() {
    return {
      //机房类型下拉选
      machineRoomTypeOptions: [],
      //站点下拉选
      stationOptions: [],
      //走线方式下拉选
      takeUpModeOptions: [],
      //是否监控下拉选
      monitoringFlagOptions: [],
      // 表单参数
      form: {},
      loading: false
    }
  },
  created() {},
  mounted() {
    this.loading = true
    getRoom(this.id).then((response) => {
      this.form = response.data
      this.loading = false
    })
    this.getDicts('machine_room_type').then((response) => {
      this.machineRoomTypeOptions = response.data
    })
    this.getDicts('take_up_mode').then((response) => {
      this.takeUpModeOptions = response.data
    })
    this.getDicts('monitoring_flag').then((response) => {
      this.monitoringFlagOptions = response.data
    })
    stationDictList().then((res) => {
      this.stationOptions = res.data
    })
  },
  methods: {

  },
}
</script>

<style scoped></style>
